<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/common/jquery.js"></script>
<script src="../js/common/drag.js"></script>
<script src="../js/common/angular.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/controller.js"></script>
</head>
<body ng-app="myApp">

<div class="dqwz">
    <span>当前位置：</span>
    <span>AngularJS 控制器</span>
</div>

<section>
    <div ng-controller="myCtrl">
        <h3>【导航控制器】</h3>
        <ul>
            <li ng-repeat="x in links"><a href="{{x.href}}">{{x.name}}</a></li>
        </ul>
        <span>{{word}}</span>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<ul>
    <li ng-repeat="x in links"><a href="{{x.href}}">{{x.name}}</a></li>
</ul>
<span>{{word}}</span>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('myCtrl',function($scope,$rootScope){
    $scope.links = [
         {href:'http://www.baidu.com',name:'百度一下'},
         {href:'http://www.youku.com',name:'优酷视频'},
         {href:'http://www.tudou.com',name:'土豆视频'}
    ];
    $rootScope.word = '点击访问';
 })
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="nameCtrl">
        <h3>【输入控制器】</h3>
        <input type="text" name="name" ng-model="name" /><br/>
        您的名字:<span ng-bind="name"></span>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<input type="text" name="name" ng-model="name" /><br/>
您的名字:<span ng-bind="name"></span>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('nameCtrl',function($scope){
    $scope.name = '小明';
 })
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div>
        <h3>【控制器别名】</h3>
        <p ng-controller = 'asCtrl as a'>
            信息：{{a.msg}}
        </p>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<p ng-controller = 'asCtrl as a'>
    信息：{{a.msg}}
</p>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('asCtrl',function($scope){
    this.msg = '控制器别名';
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
</section>

<div class="mask_layer">
</div>

</body>
</html>